<template>

	<div>
		<div>
			<p style="text-align:right">倒计时：{{count}}</p>
		</div>

		<div align="center">
			<span style="color: orangered">请选取以下生成算式的条件</span>
			<p><span>恭喜你的得分是：{{grade}}</span></p>
			<el-row>
				<el-col :span="5">
					<div align="center">
						<el-radio v-model="editForm.number" label="50">50道</el-radio>
						<el-radio v-model="editForm.number" label="100">100道</el-radio>
					</div>
				</el-col>
				<el-col :span="8">
					<div align="center">
						<el-radio v-model="editForm.exType" label="1">加法</el-radio>
						<el-radio v-model="editForm.exType" label="2">减法</el-radio>
						<el-radio v-model="editForm.exType" label="3">加减法混合</el-radio>
					</div>
				</el-col>
				<el-col :span="3">
					<div style="margin-left: 50px">
						<el-button type="primary" size="mini" @click="getUserList()">生成算式</el-button>
					</div>
				</el-col>

				<el-col :span="8">
					<div>
						<el-col :span="3" style="margin-left: 90px">
							<el-button  size="mini" class="filter-item" type="primary" icon="el-icon-download" @click="handleExport()">生成文件算式</el-button>
						</el-col>


						<el-col :span="4" style="margin-left: 120px">
							<el-upload action="" :on-change="handleelchange"  :auto-upload="false" class="upload-demo" >
								<el-button size="mini" type="primary">上传文件算式</el-button>
							</el-upload>
						</el-col>

					</div>
				</el-col>

			</el-row>
		</div>

		<div class="item">
			<div class="item-list" v-for="item in exercise.computedDtos">
				<label style="text-align: right;
    vertical-align: middle;
    float: left;
    line-height: 40px;
    padding: 10px 12px 0 0;
    box-sizing: border-box">{{item.example}}</label>
				<div style="line-height: 40px;
			 position: relative;
			 font-size: 14px;margin-left: 70px" >
<!--					{{item}}-->
					<el-input type="number" v-model="item.sum" > </el-input>
				</div>
			</div>
		</div>

		<div align="center">
			<p></p>
            <el-button type="primary"  size="mini" @click="cancel1()">清屏</el-button>
			<el-button type="primary" :style="{display: visibleSubmit}" size="mini" @click="submitForm()">提交答案</el-button>
			<el-button type="primary" :style="{display: dialogVisible}" size="mini" @click="cancel()">重做</el-button>
		</div>

	</div>
</template>

<script>
	import {apiDownLoad,importUpload} from '@/api/exportUpload'
	import axios from 'axios'
	export default {
		name: "Index",
		props: [ "cpDatas"],
		data() {
			return {
				ruleForm: {
					sum: ''
				},
				exercise:{
					computedDtos:[],
					id: ''
				},
				grade: '',
				dataList: [],
				visibleSubmit: '',
				dialogVisible: 'none',
				submitType: 0,
				editForm: {
					exType: '1',
					number: '50',
				},
				count: '', //倒计时
				seconds: 1200, // 20分钟
				flag: null,
			};
		},
		created() {
			// this.getUserList()
		},
		// mounted() {
		// 	this.Time() //调用定时器
		// },
		methods: {

			submitForm() {

				let equations = this.exercise
				equations['submitType'] = this.submitType
				console.log(equations)
				if(this.seconds===0){
					this.$message.error('已超时,请重新选择!')
				}else{
					this.$axios.post("/example/check", equations).then(res => {
						this.grade = res.data.data
						this.dialogVisible=''
						this.visibleSubmit = 'none'
						this.$message({
							showClose: true,
							message: '恭喜你，操作成功',
							type: 'success',
						});
					})
				}
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			cancel(){
				this.visibleSubmit = ''
				this.dialogVisible = 'none'
				this.submitType = 1
				this.exercise.computedDtos.map((item, index, arr) =>{
					item.sum = ''
					return item;
				})
			},
            //清屏
            cancel1(){
                this.exercise.computedDtos.map((item, index, arr) =>{
                    item.sum = ''
                    return item;
                })
            },
			getUserList() {
				// console.log(this.searchForm.time)
				this.grade=''
				this.$axios.post("/example/computed", this.editForm).then(res => {
					this.exercise = res.data.data
					this.count = ''
					this.seconds = 1200
					window.clearInterval(this.flag);
					this.Time() //调用定时器
				})
			},
			handleExport(){
				const url="/example/file"
				const options = this.editForm
				this.exportUpload(url,options)
			},
			handleelchange(file) {

				let formdata = new FormData()

				formdata.append("verticalPicture", file.raw)  //将文件加进formdata

				// let config = {
				// 	headers: {'Content-Type': 'multipart/form-data'}
				// }

				// this.$axios.post("/example/upload", formdata,config).then(res => {
				// 	console.log(res);
				//
				// })

				 importUpload("/example/upload",formdata).then(res=>{
					if(res){
						this.grade = res.data.data

						this.$message({
							showClose: true,
							message: res.data.msg,
							type: 'success',
						});
					}
				})

			},
			async exportUpload(url, options = {}) {
				this.grade=''
				// console.log(apiDownLoad())
				// const result = await apiDownLoad(url,options)
				// console.log(result,'result')
				// return
				axios({
					url: url, // 接口名字
					method: 'post',
					data: options,
					responseType: "blob",
					// 加上权限
					headers:{
						Authorization: localStorage.getItem("token")
					}
				}).then(function (response) {

					const blob = new Blob(
							[response.data], {
								type: 'text/plain'
							})
					const aEle = document.createElement('a'); // 创建a标签
					const href = window.URL.createObjectURL(blob); // 创建下载的链接
					aEle.href = href;
					aEle.download = decodeURI(response.headers["content-disposition"].split("=")[1]); // 下载后文件名
					document.body.appendChild(aEle);
					aEle.click(); // 点击下载
					document.body.removeChild(aEle); // 下载完成移除元素
					window.URL.revokeObjectURL(href) // 释放掉blob对象
				})
			},
			// 天 时 分 秒 格式化函数
			countDown() {
				let d = parseInt(this.seconds / (24 * 60 * 60))
				d = d < 10 ? "0" + d : d
				let h = parseInt(this.seconds / (60 * 60) % 24);
				h = h < 10 ? "0" + h : h
				let m = parseInt(this.seconds / 60 % 60);
				m = m < 10 ? "0" + m : m
				let s = parseInt(this.seconds % 60);
				s = s < 10 ? "0" + s : s
				this.count = d + '天' + h + '时' + m + '分' + s + '秒'
			},
			//定时器没过1秒参数减1
			Time() {
				this.flag = setInterval(() => {
					if(this.seconds!=0){
						this.seconds -= 1
						this.countDown()
					}
				}, 1000)
			},
		}

	}
</script>

<style scoped>

	::v-deep .el-input__inner {
		border-radius: 0px;
		border-top-width: 0px;
		border-left-width: 0px;
		border-right-width: 0px;
		border-bottom-width: 1px;
		/*outline: medium;*/
		width: 30%;
	}
.item{
	display: flex;
	flex-wrap: wrap;
}
	.item-list{
		width: 20%;
	}
	::v-deep .el-input__inner::-webkit-outer-spin-button,
	::v-deep .el-input__inner::-webkit-inner-spin-button {
		-webkit-appearance: none;
	}
	::v-deep .el-input__inner[type="number"]{
		-moz-appearance: textfield;
	}
</style>
